<template>
	<view >
		<scroll-view scroll-x="true"  class="p-t-30 p-b-30">
			<view class="flex flex-nowrap flex-content p-l-35 p-r-35">
				<view class="cate-item" :class="cateActive==index?'cate-item-active':''" v-for="(item,index) in list" :key="item.id" @click="changeCate(index)" >
					{{item.category_name}}
				</view>
			</view>
		</scroll-view>
		<!-- v-if="cateActive!==0" -->
		<view class="p-r-10 p-l-10 p-t-26  bg-white " style="border-top-left-radius: 30upx;border-top-right-radius: 30upx;">
			<block >
				<view class="" style="display: flex;">

				<scroll-view scroll-x="true" :scroll-into-view="scrollinto" class="m-b-20 p-l-20" style="width: 90%;display: flex;white-space:nowrap;" >
					<view class="car-item"   :class="carActive==index?'car-item-active':''" v-for="(item,index) in list[cateActive].car" :id="'soll'+index" :key="index" @click="changeCar(index)">
						{{item.car_name}}
					</view>
					
				</scroll-view>
				<image @click="openAllcar" src="../../static/images/iconPark-more.png" mode="widthFix" style="width: 44rpx;height: 44rpx;"></image>
					</view>
				<view class="main ">
					<!-- next-margin="180rpx"  previous-margin="180rpx" -->
					<swiper :current="carActive" style="height: 180upx;"  @change="changeCurr">
						<swiper-item v-for="(item,index) in  list[cateActive].car"  :key="item.id" >
							
							<view class="swiper-item flex" @click="getCarDetail(item)">
								<view class="m-r-30" @click.stop="changeCurr('sub')" >
									<!-- v-if="carActive!=0" -->
									<u-icon name="arrow-left" color="#a5a5a5"  
									></u-icon>
								</view>
								<!-- <image :src="list[cateActive].car[index-1].cover" class="" ></image> -->
								<image :src="item.cover" 
									:class="index==carActive?'now-img':'' || (index+1)==carActive?'before-img':'' || (index-1)==carActive?'after-img':''"
									mode="scaleToFill"
									></image>
									<view class="flex-1">
										<view class="">
											<view class="  ">
													<view class=" xs flex swiper-bottom-item text-center" >
														<view class="p-t-5 p-b-5  " style="color: #a9a9a9;">
															厢长：
														</view>
														<view class=" ">
															{{item.car_length}}
														</view>
													</view>
													<view class=" flex xs  swiper-bottom-item text-center" >
														<view class="p-t-5 p-b-5 "  style="color: #a9a9a9;">
															厢宽：
														</view>
														<view class=" ">
															{{item.car_width}}
														</view>
													</view>
													<view class=" flex xs swiper-bottom-item text-center" >
														<view class="p-t-5 p-b-5 " style="color: #a9a9a9;">
															厢高：
														</view>
														<view class=" ">
															{{item.car_height}}
														</view>
													</view>
													<view class=" flex xs swiper-bottom-item text-center" >
														<view class="p-t-5 p-b-5 " style="color: #a9a9a9;" >
															载重：
														</view>
														<view class=" ">
															{{item.car_weight}}
														</view>
													</view>
											</view>
										</view>
									</view>
									<view class="m-l-30" @click.stop="changeCurr('add')">
										<u-icon name="arrow-right" color="#a5a5a5" v-if="carActive!=list[cateActive].car.length-1"  ></u-icon>
									</view>
								<!-- <image :src="list[cateActive].car[index+1].cover" class=""></image> -->
							</view>
						</swiper-item>
					</swiper>
					 <!-- v-if="cateActive!=0" -->
					<view class="flex m-t-24 p-b-30">
						<view v-for="(item,index) in type" class="type-item " :key="item.id" :class="{'type-item-active':addActive[index]}" @click="changeType(index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</block>
			<!-- 
			<block v-if="cateActive==0">
				<view class="">
					<view class="flex row-center" style="background-color: #F9F9F9;border-radius: 10px;padding: 2upx 10upx;">
						<view class="carry-top p-l-24 p-r-24 p-t-20" style="width: 100%;" >
							<view class="flex carry-top-item row-between" @click="timePickerShow=true">
								<view class="flex" >
									<view class="m-r-18">
										<image src="../../static/images/swiper_clock.png" mode="" style="width: 48upx;height: 48upx;"></image>
									</view>
									<view class="xl" >{{nowTime}}</view>
								</view>
								<view class="p-r-34">
									<u-icon name="arrow-right" color="#8E8E8E" ></u-icon>
								</view>
							</view>
							<view class="flex carry-top-item row-between">
								<view class="flex">
									<view class="m-r-18">
										<image src="../../static/images/swiper_team.png" mode="" style="width: 48upx;height: 48upx;"></image>
									</view>
									<view class="xl" style="color: #484848;">需要人数</view>
								</view>
								<view class="flex">
									<view class="p-r-14 "  style="width:100upx;">
										<u-input input-align="right" :clearable="false" v-model="carry_number" placeholder="请输入需要搬运的人手" type="number" ></u-input>
									</view>
									
									<view class="m-r-34 need-num lg m-l-50">
										人
									</view>
								</view>
							</view>
							<view class="flex carry-top-item row-between"  @click="selectAddress">
								<view class="flex">
									<view class="m-r-18">
										<image src="../../static/images/swiper_map.png" mode="" style="width: 48upx;height: 48upx;"></image>
									</view>
									<view>
										<view class="carry-top-name">
											{{addressInfo.name}}
										</view>
										<view class="carry-top-detail">
											{{addressInfo.detail}}
										</view>
									</view>
								</view>
								<view class="flex">
									<view class="" style="width: 2upx;height: 30upx;background-color: #f1f1f1;">
										
									</view>
									<view  class="m-l-18 carry-top-detail place-content" @click="selectAddress">
										地址簿
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="flex p-l-20 p-r-20 m-t-60">
						<view class="m-r-60" style="margin-right: 96rpx;">收费方式</view>
						<view class="carry-cost " >
							<view class="carry-cost-son " :clearable="false" :class="costActive==index?'active':''" v-for="(item,index) in costType" :key="item.id" @click="costActive=index">
								{{item.name}}
							</view>
						</view>
					</view>
					<block v-if="costActive==1">
						<view class="carry-cost-item flex row-between m-t-32">
							<view>装卸货数量</view>
							<view class="flex cost-bg">
								<u-input type="number" value="" input-align="center"  :clearable="false"  v-model="freight_num" />
								<view class="m-r-22" style="width: 2upx;height: 30upx;background-color: #E8E8E8 ">
									
								</view>
								<view class="flex-1 flex" @click="unitShow=true" >
									{{unitValue}}
									<view class="flex row-center m-l-20" style="width: 52upx;height: 52upx;">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="carry-cost-item flex row-between m-t-32">
							<view>我愿意出价</view>
							<view class="flex cost-bg">
								<u-input type="text" input-align="center"  :clearable="false"  v-model="freight_price" />
								<view class="m-r-22" style="width: 2upx;height: 30upx;background-color: #e8e8e8">
									
								</view>
								<view class="flex-1 flex"style="width: 100upx;text-align: center;" >
									<text style="width: 100upx; " class="p-r-32">	{{'元/' + unitValue}}</text>
								</view>
							</view>
						</view>
					</block>
					<block v-if="costActive==0">
						<view class="carry-cost-item flex row-between m-t-32">
							<view>一口价</view>
							<view class="flex cost-bg">
								<u-input type="type" value="" input-align="center" v-model="one_price"  @change="onPriceChange" />
								<view class="m-r-22" style="width: 2upx;height: 30upx;background-color: #e8e8e8">
									
								</view>
								<view class="flex-1 flex"style="width: 100upx;text-align: center;" >
									<text style="width: 100upx; " class="p-r-32">	元</text>
								</view>
							</view>
						</view>
					</block>
					<view class="bg-white p-20">
						<view class="other-tit">补充描述</view>
						<view class="p-10" style="background-color:#F9F9F9;border-radius: 8upx;overflow: hidden;">
							<u-input v-model="remark" type="textarea" height="180" placeholder="请详细描述搬运需求,有利于搬运小哥接单!" ></u-input>
							<view class="flex p-r-20 xs" style="color:#D5D5D5; justify-content: flex-end;">
								{{remark.length}}/120
							</view>
						</view>
						<view class="other-tit">
							照片上传(选填)
						</view>
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
							:max-count="10" width="140" height="140" :action="action" upload-text="上传图片"
							@on-success="onSuccess"  @on-remove="onRemove" />
					</view>

				</view>
				<view style="">
					
				</view>
				<view class="bg-white flex-col row-center" v-if="totalPrice">
					<view class="text-center" style="color: #8E8E8E">计费金额</view>
					<view class="flex text-center bold m-t-8 row-center">
						<text class="m-r-18" style="font-size: 40upx;">￥</text>
						<text class="" style="font-size: 56upx;">
							{{totalPrice==''?'计算中':totalPrice}}</text>
					</view>
				</view>
				<view style="height: 200rpx;width: 100%;">
					
				</view>
				<view class="swiper-footer" @click="orderPushFun">
					确认下单
				</view>
				
			</block> -->
		</view>
		<u-select v-model="unitShow" :list="unitList" value-name="id" label-name="name" @confirm="unitConfirm" ></u-select>
		<u-picker :params="params" mode="time" v-model="timePickerShow" @confirm="timePickerFirm"></u-picker>
	</view>
</template>

<script>
	import {
		baseURL
	} from '@/config/app'
	import {
		getIndexCar
	} from "@/api/car"
	import {getUnit,addPrice,orderPush} from '@/api/carry'
	export default {
		name:"index-swiper",
		data() {
			return {
				scrollinto:"",
				soll:'',
				totalPrice:0,
				one_price:0,
				action: baseURL + '/api/file/formimage',
				remark:'',
				params:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
				},
				nowTime:'请选择时间',
				timePickerShow:false,
				freight_price:10,
				freight_num:1,
				carry_number:2,
				cateActive:0,
				carList:[],
				carActive:0,
				addActive:[],
				list:[],
				type:[],
				label:[],
				costType:[
					{
						id:1,
						name:'一口价'
					},
					{
						id:2,
						name:'按量计'
					}
				],
				costActive:0,
				addressInfo:{
					name:'请选择',
					detail:'请选择',
					id:null
				},
				unitId:null,
				unitList:[],
				unitValue:'吨',
				unitShow:false,
				fileList:[],
				webstockt:null
			};
		},
		created() {
			uni.$on("selectCarType",(item)=>{
				this.cateActive = item.cartType;
				this.carActive = item.carType
				
			this.changescollect(item.carType)
			})
		},
		beforeDestroy() {
			uni.$off("selectCarType")
		},
		mounted() {
		
			// const url = 'wss://hy.qslmkj.com:9803';
			// this.webstockt = uni.connectSocket({
			// 	url,
			// 	success:res=>{
			// 		console.log('成功',res)
			// 		this.webstockt.onOpen(res=>{
			// 			this.webstockt.send({
			// 				data:JSON.stringify(data),
			// 				success:res=>{
			// 					console.log(res)
			// 				}
			// 			})
			// 			this.webstockt.message({
			// 				data:JSON.stringify(data),
			// 				success:res=>{
			// 					console.log(res)
			// 				}
			// 			})
			// 		})
			// 	},
			// 	fail:err=>{
			// 		console.log(err)
			// 	}
			// })
		},
		watch:{
			costActive(val){
				if(val==1){
					this.addPriceFun();
				}
			},
			cateActive(){
				this.$emit('changePrice')
				if(this.list[this.cateActive].is_open==0){
					this.$toast({
						title:"该城市暂未开通服务"
					})
				}
				this.type =this.list[this.cateActive].car[this.carActive].label
				this.initFun();
			},
			carActive(){
				
				this.type =this.list[this.cateActive].car[this.carActive].label
				this.initFun();
				
				this.$emit('changePrice')
			},
			one_price(val){
			
				setTimeout(()=>{
					this.totalPrice = val;
				},300)
			},
			freight_num(val){
				setTimeout(()=>{
					this.addPriceFun();
				},300)
			},
			freight_price(val){
				setTimeout(()=>{
					this.addPriceFun();
				},300)
			}
		},
		methods:{
		changeCar(item){
			this.carActive=item
			console.log(item);
			if(item>this.list[this.cateActive].car.length-1){
				return
			}	else if(item>2){
				
				this.scrollinto=`soll${item-2}`
			}else if(item<=2){
				this.scrollinto="soll0"
			}
		},
			getCarDetail(item){
			
				uni.navigateTo({
					url:"/bundle/pages/car-detal/car-detal?id="+item.id
				})
			},
		

			//改变滑块位置
			changescollect(item){
				console.log(item>=this.list[this.cateActive].car.length-1);
				if(item>this.list[this.cateActive].car.length-1){
					return
				}	else if(item>3){
					
					this.scrollinto=`soll${item}`
					console.log()
				}else if(item<3){
					this.scrollinto="soll0"
				}
				// if(this.list[this.cateActive].length>4||count<=this.list[this.cateActive].length){
				// this.scrollinto=`soll${count}`
				// count++
				// }else{
				// this.scrollinto=""
				// }
			},
			orderPushFun(){
				let {carry_number,addressInfo,costType,costActive,fileList,remark,freight_price,unitValue,freight_num,totalPrice} = this;
				let type = costType[costActive].id;
				let data = {
					num:carry_number,
					address_id:addressInfo.id,
					type,
					remark,
					images:fileList
				}
				// 一口价情况
				if(type==1){
					data.total_amount = totalPrice
				}
				// 按量情况
				if(type==2){
					data.price = freight_price;
					data.unit = unitValue;
					data.freight_num = freight_num
				}
				
				orderPush({
					...data
					
				}).then(res=>{
					if(res.code!=1)return
					uni.setStorageSync("reprice",this.totalPrice)
					uni.navigateTo({
						url:`/bundle/pages/pay/pay?order_id=${res.data.id}&type=12`
					})
				})
			},
			addPriceFun(){
				if(this.freight_num>0 && this.freight_price>0){
					addPrice({
						freight_num:this.freight_num,
						price:this.freight_price
					}).then(res=>{
						this.totalPrice = res.data.total_amount;
					})
				}
				
			},
			onSuccess(e) {
				this.fileList.push(e.data.uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
				
			},
			timePickerFirm({year,month,day,hour,minute}){
				this.nowTime = `${year}-${month}-${day} ${hour}:${minute}`
			},
			unitConfirm(e){
		
				this.unitId = e[0].value;
				this.unitValue = e[0].label;
			},
			getUnitFun(){
				getUnit().then(res=>{
					this.unitList = res.data.lists;
					this.unitValue = this.unitList[0].name;
					this.unitId = this.unitList[0].id;
				})
			},
			selectAddress(){
				uni.navigateTo({
					url:'/bundle/pages/address_book/address_book?select=1'
				})
			},
			changeCurr(e){
				
				if(e=='add'){
					this.carActive = this.carActive+1;
					return 
				}
				if(e=='sub'){
					this.carActive = this.carActive-1;
					return 
				}
				
				this.carActive = e.detail.current;
				
				this.changescollect(e.detail.current)
			},
			changeCate(index){
				//一个是上面的类型一个是下面的类型
				this.cateActive = index;
				this.carActive = 0
			},
			catchTouchMove(){
				return false
			},
			changeType(index){
				// function count(arr, item) {
				//   // 返回值是删除不符合条件的元素
				//     var count = arr.filter(function(a) {
				//       // 返回true的项组成的数组
				//           return a === item;   
				//     });
				//       // 数组的长度
				//     return count.length;
				// }   

				// let length = count(this.addActive,true);
				// console.log(length)
				// if(length>1){
				// 	return
				// }
				
				this.addActive[index] = ! this.addActive[index]
				this.$forceUpdate();
				
				let arr =[];
				this.addActive.forEach((item,index)=>{
					if(item==true){
						arr.push(this.type[index].id)
					}
				})

				this.label = arr.concat();
			},
			initFun(){
				this.addActive = [];
			
				for(let i =0;i<this.type.length;i++){
					this.addActive.push(false)
				}
			
			},
			getIndexCarFun(){
			
				let address = this.$store.state.app.swiperAddress
				
				getIndexCar({
					province:address.province || '广东省',
					city:address.city || '广州市'
				}).then(res=>{
				
					
					
					this.list = res.data.lists;
					// this.list.unshift({category_name:'搬运',is_open:true})
					
					this.type = this.list[this.cateActive].car[this.carActive].label
					this.initFun();
					if(this.list[this.cateActive].is_open==0){
						this.$toast({
							title:"该城市暂未开通服务"
						})
					}
				})
			},
			openAllcar(){
				uni.navigateTo({
					url:"/bundle/pages/dr_apply/select_car"
				})
			}
		},
		beforeMount(){
			this.getIndexCarFun();
			this.getUnitFun();
		}
	}
</script>

<style scoped lang="scss">
	.cate-item:nth-child(2){
		margin-left: 74rpx;
		margin-right: 74rpx;
	}
	.place-content{
		position: relative;
	}
	.place-content:before{
		position: absolute;
		content: "";
		width: 2rpx;
		top: 1rpx;
		left:-15rpx;
		height: 34rpx;
		background-color:#C8C8C8 ;
	}
	.need-num{
		position: relative;
	}
	.need-num:before{
		position: absolute;
		content: "";
		width: 2rpx;
		top: 4rpx;
		left:-30rpx;
		height: 34rpx;
		background-color:#C8C8C8 ;
	}
	.cate-item{
		font-size: 32rpx;
		width: 25%;
		
		text-align: center;
		color: #fff;
		
	}
	.cate-item-active{
		// font-size: 32upx;
		// font-weight: bold;
		border-bottom: 12rpx solid #f09078;
		// background:url(../../static/images/index_cate.png) no-repeat ;
		// background-position:0% 120%;
		// background-size:100% 20upx;
	
	}
	
	.car-item{
		width: 25%;
		// width: 1200upx;
		// padding: 25upx 0;
		text-align: center;
		color: #a9a9a9;
		display: inline-block;
		overflow: hidden;
		padding: 8upx 0;
	}
	.car-item-active{
		background-color: #faddd6;
		color: #e85532;
		padding: 8upx 0;
		border-radius: 10upx 20upx 10upx 20upx;
		display: inline-block;
		overflow: hidden;
	}
	.main{
		// background-color: #f5f5f5;
		// height: 386upx;
		height: 100%;
		border-radius: 20upx;
		
		.swiper-bottom-item{
			// width: 20%;
			margin-left: 20%;
			border-radius: 10upx;
			// &:last-child{
			// 	margin-right: 4%;
			// }
		}
		.swiper-item{
			// margin-top: 62upx;
			// margin-bottom: 60upx;
			.before-img{
				// width:298upx;
				height: 190upx;
				position: relative;
				transform: skewY(-3deg) translate(-20upx,10upx) scale(.8);
			}
			.after-img{
				// width:298upx;
				height: 190upx;
				transform: skewY(3deg) translate(20upx,10upx) scale(.8);
			}
			.now-img{
				width:260upx;
				height: 140upx;
				// border: 2upx solid #e85532;
				border-radius: 20upx;
				overflow: hidden;
			}
			
		}
	}
	.type-item{
		display: inline-block;
		height: 48upx;
		text-align: center;
		line-height: 48upx;
		border-radius: 10upx;
		margin-right: 10upx;
		font-weight: 650;
		font-size: 20upx;
		padding: 0upx 10upx;
		border: 1upx solid #A5A5A5;
		color: #666;
	}
	.type-item-active{
		display: inline-block;
		height: 48upx;
		text-align: center;
		line-height: 48upx;
		border-radius: 10upx !important;
		margin-right: 10upx;
		font-weight: 650;
		font-size:  20upx;
		background-color: rgb(253,242,239);
		color:$-color-primary;
		padding: 0upx 10upx;
		border: 1upx solid $-color-primary;
	}
	.carry-top{
		box-shadow: 0upx 4upx 28upx 1upx rgba(183, 183, 183, 53);
		border-radius: 4upx;
		padding-bottom: 31upx;
		.carry-top-item{
			height: 112upx;
			border-bottom: 2upx solid rgba(234, 234, 234, 100);
			&:last-child{
				border: none;
			}
			.carry-top-name{
				color: #101010;
				font-size: 34upx;
				
			}
			.carry-top-detail{
				color: #7D7D7D;
				margin-top: 10upx;
			}
			// line-height: 112upx;
		}
	}
	.carry-cost{
		display: flex;
		align-items: center;
		width: 286upx;
		height: 70upx;
		line-height: 70upx;
		border: 1px solid rgba(210, 210, 210, 100);
		text-align: center;
		border-radius: 500upx;
		.carry-cost-son{
			width: 154upx;
			height: 70upx;
			color: #797979;
			&.active{
				background-color: #E85631;
				color: #fff;
				border-radius: 500upx;
			}
		}
	}
	.carry-cost-item{
		border-radius: 16upx;
		padding: 0 24upx;
	}
	.cost-bg{
		background-color: #F9F9F9;
		width: 260upx;
		height: 64upx;
	}
	.other-tit{
		font-size: 30upx;
		padding: 20upx 0;
	}
	.swiper-footer{
		z-index: 10;
		width: 90%;
		background-color: #E85631;
		height: 100upx;
		position: fixed;
		bottom: 10upx;
		left: 5%;
		color:#fff;
		text-align: center;
		line-height: 100upx;
		font-weight: bold;
		border-radius: 8upx;
	}
</style>
